<template>
	<view class="content">
		<mine-head title="个人信息"></mine-head>
		<view class="con">
			<view class="item _df _ac _jb">
				<view class="title">
					头像
				</view>
				<view class="info _df _ac" @click="upload">
					<image class="photo" :src="host + data.photo" mode=""></image>
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="card _df _ac" @click="toAid">
				<view class="icon">
					<image src="@/static/img/mine/myIcon1.png" alt="" ></image>
				</view>
				
				<view class="text">
					<view class="name">
						医疗急救卡
					</view>
					<view class="info clamp2">
						用于紧急情况下，救治人员获取挽救生命的信息
					</view>
				</view>
				<view class="view _df _ac">
					<view class="">
						去设置
					</view>
					<image src="@/static/img/index/rightW.png" mode=""></image>
				</view>
			</view>
			<view class="item _df _ac _jb" @click="showPop('name')">
				<view class="title">
					<span>*</span>姓名
				</view>
				<view class="info _df _ac">
					{{data.name}}
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="item _df _ac _jb" @click="showPop('nickName')">
				<view class="title">
					昵称
				</view>
				<view class="info _df _ac">
					{{data.nickName}}
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="item _df _ac _jb" @click="actionShow = true">
				<view class="title">
					<span>*</span>性别
				</view>
				<view class="info _df _ac">
					{{data.sex}}
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="item _df _ac _jb" @click="showPop('famous')">
				<view class="title">
					<span>*</span>民族
				</view>
				<view class="info _df _ac">
					{{data.famous}}
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="item _df _ac _jb" @click="calendarShow = true">
				<view class="title">
					<span>*</span>生日
				</view>
				<view class="info _df _ac">
					{{data.birthday}}
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="item _df _ac _jb" @click="showPop('height')">
				<view class="title">
					身高
				</view>
				<view class="info _df _ac">
					{{data.height}}cm
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
			<view class="item _df _ac _jb" @click="showPop('weight')">
				<view class="title">
					体重
				</view>
				<view class="info _df _ac">
					{{data.weight}}kg
					<image class="rightIcon" src="@/static/img/index/right.png" mode=""></image>
				</view>
				
			</view>
		</view>
		<u-popup v-model="show" @close="popClose" :closeable="true" mode="center" border-radius="20" width="80%" height="400rpx">
			<view class="popCon">
				<view class="title">
					{{popTitle}}
				</view>
				<view class="input-box">
					<u-input v-model="inputVal" :border="true" placeholder="请输入" :height="80" :clearable="true" />
					<view class="btn" @click="submit">
						提交
					</view>
				</view>
				
			</view>
		</u-popup>
		<u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet>
		<u-picker v-model="calendarShow" :default-time="data.birthday" confirm-color="#FF4651" :params="params" @confirm="dateChange" mode="time"></u-picker>
		<!-- <u-calendar active-bg-color="#FF4651" v-model="calendarShow" mode="date" @change="dateChange"></u-calendar> -->
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	export default {
		data() {
			return {
				data:{
					  photo: '',
					  name: '',
					  nickName: '',
					  sex: '',
					  birthday: '',
					  height: '',
					  weight: '',
					  
				},
				sex:'',
				host:null,
				action: config.host1 + '/app/common/upload',
				actionData: {
					
				},
				header: {
					authorization: ''
				},
				inputVal:'',
				popTitle:'修改昵称',
				type:'',
				show:false,
				actionList:[
					{
						text:'男',
						value:'男'
					},
					{
						text:'女',
						value:'女'
					},
					{
						text:'未知',
						value:'未知'
					}
				],
				actionShow:false,
				calendarShow:false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
			};
		},
		onLoad() {
			this.host = config.host1
			this.header.authorization = uni.$_getToken()
			this.getUser()
		},
		onShow() {
			
		},
		methods:{
			toAid(){
				uni.navigateTo({
					url:'/pages/tabbar/mine/firstaid'
				})
			},
			dateChange(e){
				this.data.birthday = e.year + '-' +e.month+'-' +e.day
				this.submit()
			},
			actionClick(index){
				this.data.sex = this.actionList[index].text
				this.submit()
			},
			showPop(e){
				this.show = true
				this.type = e
				switch(e){
					case 'name':
						this.inputVal = this.data.name
						this.popTitle = '姓名'
						break;
					case 'nickName':
						this.inputVal = this.data.nickName
						this.popTitle = '修改昵称'
					break;
					case 'famous':
						this.inputVal = this.data.famous
						this.popTitle = '民族'
						break;
					case 'height':
						this.inputVal = this.data.height
						this.popTitle = '修改身高'
						break;
					case 'weight':
						this.inputVal = this.data.weight
						this.popTitle = '修改体重'
						break;
				}
			},
			getUser() {
				let that = this;
				uni.$_get({
					url: "get-user",
					that: that,
					success(res) {
						let _data = res.data;
						if (res.code == 0) {
							that.data.photo = _data.photo
							that.data.name = _data.name
							that.data.nickName = _data.nickName
							that.data.sex = _data.sex
							that.sex = _data.sex
							that.data.famous = _data.famous
							that.data.birthday = _data.birthday
							that.data.height = _data.height
							that.data.weight = _data.weight
						}
			
					},
					fail(err) {
			
					},
				});
			},
			popClose(){
				this.show = false
				// this.inputVal = ''
			},
			submit() {
				if(this.type == 'nickName'){
					this.data.nickName = this.inputVal
				}else if(this.type == 'name'){
					this.data.name = this.inputVal
				}else if(this.type == 'height'){
					this.data.height = this.inputVal
				}else if(this.type == 'weight'){
					this.data.weight = this.inputVal
				}else if(this.type == 'famous'){
					this.data.famous = this.inputVal
				}
				console.log(this.data,6666)
				let that = this;
				uni.$_post({
					url: "edit-user",
					that: that,
					params: that.data,
					success(res) {
						let _data = res.data;
						if (res.code == 0) {
							
							that.popClose()
							
						}
			
					},
					fail(err) {
			
					},
				});
			},
			upload(){
				// this.$refs.uUpload.upload();
				let that = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: that.action, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header:that.header,
							formData: that.actionData,
							success: (uploadFileRes) => {
								let _data = JSON.parse(uploadFileRes.data)
								that.data.photo = _data.data
								that.submit()
							}
						});
					}
				});
			},
			onSuccess(res) {
				this.data.photo = res.data
			},
			valueChange(){
				let isBack = false
				if(!this.data.name){
					uni.showToast({
						title:'请填写姓名！',
						icon:'none',
					})
					isBack = true
				}else if(!this.data.sex){
					uni.showToast({
						title:'请选择性别！',
						icon:'none',
					})
					isBack = true
				}else if(!this.data.famous){
					uni.showToast({
						title:'请填写民族！',
						icon:'none',
					})
					isBack = true
				}else if(!this.data.birthday){
					uni.showToast({
						title:'请选择生日！',
						icon:'none',
					})
					isBack = true
				}else{
					isBack = false
				}
				return isBack
			}
		},
		onUnload(){
			// this.valueChange()
		},
		onBackPress(options) {
			// if(uni.$_getSystem() == 'android'){
			// 	return this.valueChange()
			// }
			
			// if(options.from === 'backbutton'){
			// 		return true
			// 	}
			// 	// 否则则允许返回
			// 	return false;
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary{
		background-color: #FF4651;
		border-color: #FF4651;
	}
.con{
	padding: 30rpx;
	.item{
		height: 100rpx;
		margin-bottom: 30rpx;
		.info{
			margin: 0 0 0 auto;
			.photo{
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				background-color: #eee;
			}
			.rightIcon{
				width: 14rpx;
				height: 24rpx;
				margin-left: 30rpx;
			}
		}
		
		.title{
			font-size: 32rpx;
			color: #000;
			font-family: $uni-font-family-Bold;
			position: relative;
			span{
				color: #ff0000;
				position: absolute;
				left: -20rpx;
				top: 5rpx;
			}
		}
	}
	.card{
		background: #ff575b url(@/static/img/mine/myBg2.png) no-repeat top -50rpx right -30rpx;
		border-radius: 30rpx;
		padding: 40rpx 40rpx 40rpx 60rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		.icon{
			width: 50rpx;
			height: 50rpx;
			// margin-right: 40rpx;
			// display: block;
			image{
				width: 50rpx;
				height: 50rpx;
			}
		}
		.text{
			margin: 0 auto 0 40rpx;
			.name{
				font-size: 30rpx;
				color: #fff;
				font-family: $uni-font-family-Heavy;
				margin-bottom: 5rpx;
			}
			.info{
				font-size: 22rpx;
				color: #FAE2E2;
				font-family: $uni-font-family-Medium;
				line-height: 28rpx;
				padding-right: 40rpx;
			}
		}
		.view{
			font-size: 24rpx;
			width: 150rpx;
			color: #fff;
			font-family: $uni-font-family-Medium;
			image{
				width: 14rpx;
				height: 24rpx;
				margin-left: 10rpx;
				
			}
		}
	}
	
}
.popCon{
	position: relative;
	.title{
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		background-color: #f4f4f4;
		font-family: $uni-font-family-Heavy;
	}
	.input-box{
		padding: 40rpx 40rpx;
	}
	.btn{
		margin-top: 70rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		font-family: $uni-font-family-Heavy;
		border-radius: 40rpx;
		background-color: #ff575b;
	}
}
</style>
